<template>
  <div class="common_page">
    <div ref="mainContent" class="main_content">
      <div class="energy_medium">
        <div class="energy_medium_left">
          <el-input v-model="searchData.deviceName" placeholder="请输入内容" style="margin-bottom: 5px"></el-input>
          <div class="search_content">
            <el-tree
                ref="leftTree"
                :data="leftTreeData"
                :filter-node-method="filterNode"
                :props="leftProps"
                highlight-current
                node-key="id"
                show-checkbox
            >
            </el-tree>
          </div>
        </div>
        <div class="energy_medium_center">
          <sysTable
              :columns="centerColumns"
              :data="centerTableData"
              :page-size="searchTemData.pageSize"
              :show-pagination="true"
              :total-page="dataTotal"
              @currentChange="currentChange"
              @sizeChange="sizeChange"
              @selection-change="selectChange"
          >
            <template #operation="scope">
              <el-button class="ope_btn" type="text" @click="showwarehousing(scope.scope.row)">入库</el-button>
            </template>
          </sysTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Ntitle from '../components/Title'
import sysTable from '../components/SysTable'
import {
  getDistributionList,
  getDistributionLeft,
  addDistribution,
  getDistributionRight
} from '../../energy/api/energy/distributionManage';
import {
  configurationSelect,
  getTemplateById,
  getEquipmentById,
  applicatConfiguration
} from '../../energy/api/energy/equipmentEfficiency'
import {kMaxLength} from 'buffer';

export default {
  name: 'energyReport',
  components: {
    Ntitle,
    sysTable
  },
  data() {
    return {
      searchData: {
        deviceName: ''
      },
      leftTreeData: [],
      rightTreeData: [],
      searchTemData: {
        pageSize: 10,
        currPage: 1,
        tempId: []
      },
      centerColumns: [
        {
          label: '考核年度',
          prop: 'serialNumber',
          minWidth: '220',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '考核时间',
          prop: 'deviceName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '姓名',
          prop: 'buildName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '所属部门',
          prop: 'workshopName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '岗位',
          prop: 'templateName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '修改时间',
          prop: 'updateTime',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '得分',
          prop: 'updateBy',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '操作',
          prop: 'operation',
          minWidth: '100',
          fixed: 'right',
          align: 'center'
        },
      ],
      dataTotal: 0,
      leftProps: {
        children: 'deviceShortOutputs',
        label: 'deviceName'
      },
      defaultProps: {
        children: 'workshops',
        label: 'templateName'
      },
      centerTableData: [],
      centerCheckData: [],
      delData: '',
      addData: {},
      nowClick: null,
      checkRight: [],

      buttonLoading: false
    }
  },
  watch: {
    searchData: {
      handler: function (val) {
        console.log(val, '33333')
        this.$refs.leftTree.filter(val.deviceName);
      },
      deep: true
    }
  },
  mounted() {
    this.getLeftList()
    this.getRightList()
    // this.getTableList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.deviceName.indexOf(value) !== -1;
    },
    getTableList(val) {
      const obj = val || []
      getDistributionList(obj).then(res => {
        this.centerTableData = res.data || []
        this.centerTableData.map(item => {
          item.nowType = false
        })
        console.log(this.centerTableData, '3333333222')
      })
    },
    getLeftList() {
      getDistributionLeft(this.searchData).then(res => {
        this.leftTreeData = res.data
      })
    },
    searchTemplete() {
      const arr = this.$refs.leftTree.getCheckedNodes()
      if (arr.length == 0) {
        this.$message.warning(`请选择至少一个设备`);
        return
      }
      this.$refs.rightTree.setCheckedNodes([])
      var temId = []
      arr.map((item, index) => {
        if (item.deviceShortOutputs) {
          arr.splice(index, 1)
        }
      })
      arr.map((item) => {
        temId.push(item.deviceId)
      })
      this.searchTemData.currPage = 1
      this.searchTemData.tempId = temId
      this.getTemplateById(this.searchTemData)

    },
    getTemplateById(val) {
      getTemplateById(val).then(res => {
        this.centerTableData = res.data.list || []
        this.dataTotal = res.data.total
      })
    },
    searchEquipment() {
      const arr = this.$refs.rightTree.getCheckedNodes()
      if (arr.length == 0) {
        this.$message.warning(`请选择至少一个模板`);
        return
      }
      this.$refs.leftTree.setCheckedNodes([])
      console.log(arr, '3333')
      var temId = []
      arr.map((item) => {
        temId.push(item.id)
      })
      this.searchTemData.currPage = 1
      this.searchTemData.tempId = temId
      this.getEquipmentById(this.searchTemData)
    },
    getEquipmentById(val) {
      getEquipmentById(val).then(res => {
        this.centerTableData = res.data.list || []
        this.dataTotal = res.data.total
      })
    },
    applicationTemplate() {
      const arrList = this.$refs.rightTree.getCheckedNodes()
      if (this.centerCheckData.length == 0) {
        this.$message.warning(`请选择至少选择表格中的一条数据`);
        return
      } else if (arrList.length != 1) {
        this.$message.warning(`应用时最多选择一个模板`);
        return
      }
      const obj = {
        tempId: '',
        deviceId: []
      }
      const arr = this.$refs.rightTree.getCheckedNodes()
      arr.map(item => {
        obj.tempId = item.id
      })
      this.centerCheckData.map(item => {
        obj.deviceId.push(item.deviceId)
      })
      applicatConfiguration(obj).then(res => {
        this.searchTemplete()
      })
    },
    handleExport() {
      this.buttonLoading = true
      var datas = {
        buildingId: this.searchData.buildingId,
        workshopId: this.searchData.workshopId,
        deviceId: this.searchData.deviceId,
        classifyId: this.searchData.classifyId,
        deviceName: this.searchData.deviceName,
        begin: this.searchData.date ? this.searchData.date[0] : '',
        end: this.searchData.date ? this.searchData.date[1] : '',
        timeType: this.searchData.type,
        pageSize: '',
        pageNum: ''
      }
      const obj = JSON.parse(JSON.stringify(datas))
      this.download('production/evaluation/queryListReport', {
        ...obj
      }, '生产记录.xlsx')
      this.buttonLoading = false
      // exportBuild(obj).then(res=> {
      //   const fileName = '设备能源监控记录.xlsx'
      //   saveExcel(res.data, fileName)
      // })
    },
    selectChange(val) {
      this.centerCheckData = val
    },
    sizeChange(val) {
      this.searchTemData.pageSize = val
      this.getTemplateById(this.searchTemData)
    },
    currentChange(val) {
      this.searchTemData.currPage = val
      this.getTemplateById(this.searchTemData)
    },
    showwarehousing(val) {

    }
  }
}
</script>

<style lang="scss" scoped>
.common_page {
  height: 100%;
  width: 100%;
  background: #f3f4f5;
  overflow: auto;
}

.main_content {
  width: 100%;
  height: 100%;
  // background: #fff;
  padding: 20px;

  .main_content_head {
    margin-bottom: 30px;
  }
}

.energy_medium {
  width: 100%;
  height: 100%;
  display: flex;

  .energy_medium_left {
    // width: 300px;
    width: 23%;
    height: 100%;
    background: #fff;

    .search_content {
      width: 100%;
      height: calc(100% - 41px);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 4px;
      color: #000;
      font-size: 12px;
      box-shadow: 0px 0px 4px rgba(217, 217, 217, 1);
      padding: 10px;
      overflow: auto;
      padding-bottom: 20px;
    }
  }

  .energy_medium_center {
    width: 77%;
    // flex: 1;
    margin-left: 10px;
    background: #fff;
  }
}

.ope_btn {
  width: 44px;
  height: 28px;
  line-height: 28px;
  color: #3399FF;
  font-size: 14px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 85, 255, 0.5);
  padding: 0px;
}
</style>
